{% extends 'base.html' %}

{% block title %}注册{% endblock %}

{% block content %}
<html lang="zh-CN">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
            background-color: #f8f9fa; /* 背景色 */
            color: #333; /* 文字颜色 */
        }

        header {
            text-align: center; /* 居中对齐 */
            margin-bottom: 20px; /* 下边距 */
        }

        main {
            max-width: 480px; /* 最大宽度 */
            margin: 0 auto; /* 居中对齐 */
            background: white; /* 背景色 */
            padding: 20px; /* 内边距 */
            border-radius: 10px; /* 圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
        }

        h1 {
            color: #35424a;
            margin-bottom: 20px; /* 下边距 */
            margin-top: 50px;
        }

         h2 {
            color: #35424a;
            margin-bottom: 15px; /* 下边距 */
            margin-top: 40px;
        }

        label {
            display: block;
            margin-top: 10px;
            font-weight: bold; /* 加粗字体 */
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: 100%; /* 宽度100% */
            padding: 10px; /* 内边距 */
            margin-top: 5px; /* 上边距 */
            border-radius: 4px; /* 圆角 */
            border: 1px solid #ccc; /* 边框颜色 */
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1); /* 内部阴影 */
            transition: border-color 0.3s; /* 边框变色过渡 */
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus {
            border-color: #007bff; /* 聚焦时边框颜色 */
            outline: none; /* 去掉默认的外边框 */
        }

        .button-container {
            display: flex; /* 使用flex布局 */
            justify-content: flex-end; /* 将内容对齐到右侧 */
            margin-top: 20px; /* 上边距 */
        }

        .styled-button {
            background-color: #007bff; /* 按钮背景色为黑色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
            margin-top: 10px; /* 上边距 */
        }

        .styled-button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
            transform: scale(1.05); /* 悬停时轻微放大 */
        }

        .styled-button:active {
            transform: scale(0.95); /* 按下时轻微缩小 */
        }

        p {
            text-align: center; /* 居中对齐 */
            margin-top: 20px; /* 上边距 */
        }

        a {
            color: #007bff; /* 链接颜色 */
            text-decoration: none; /* 去掉下划线 */
            transition: color 0.3s; /* 链接变色过渡 */
        }

        a:hover {
            text-decoration: underline; /* 悬停时下划线 */
        }

        /* 样式：消息提示框 */
        .alert {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
        }

        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
        }

        .alert-message p {
            margin: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>LawInsight - 法律数据智能分析一体化平台</h1>
        <hr>
        <h2>注册</h2>
    </header>
    <main>
        <form method="post">
            {% csrf_token %}
            <label for="username">用户名:</label>
            <input type="text" name="username" required>
            <label for="email">邮箱:</label>
            <input type="email" name="email" required>
            <label for="password">密码:</label>
            <input type="password" name="password" required>
            <div class="button-container">
                <button type="submit" class="styled-button">注册</button>
            </div>
            <p>已有帐号? <a href="{% url 'login' %}">登录</a></p>
        </form>

    </main>
</body>
</html>
{% endblock %}